<template>
    <el-form :inline="true">
        <p>基本用法</p>
        <el-input v-model="input" placeholder="占位符"></el-input>

        <p>禁用状态</p>
        <el-input placeholder="请输入内容" v-model="input" :disabled="true"></el-input>

        <p>可清空</p>
        <el-input placeholder="请输入内容" v-model="input" clearable></el-input>

        <p>密码框</p>
        <el-input placeholder="输入密码" v-model="input" show-password></el-input>

        <p>带icon的输入框</p>
        <el-form-item>
            <div class="demo-input-suffix">
                属性方式:
                <el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input1"></el-input>
                <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input2"></el-input>
            </div>
        </el-form-item>
        <el-form-item>
            <div class="demo-input-suffix">
                slot方式: 
                <el-input placeholder="请选择日期"  v-model="input3">
                    <i slot="suffix" class="el-input__icon el-icon-date"></i>
                </el-input>
                <el-input placeholder="请输入内容" v-model="input4">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
            </div>
        </el-form-item>
        
        <p>文本域</p>
        <el-form-item>
            <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="textarea"></el-input>
        </el-form-item>

        <p>可自适应文本高度的文本域</p>
        <el-form-item>
            <el-input type="textarea" autosize placeholder="请输入内容" v-model="textarea1"></el-input>
            <div style="margin: 20px 0;"></div>
            <el-input type="textarea" :autosize="{minRows:2,maxRows:4}" placeholder="请输入" v-model="textarea2"></el-input>
        </el-form-item>

        <p>复合型输入框</p>
        <el-form-item>
            <div>
                <el-input placeholder="请输入内容" v-model="input1">
                    <template slot="prepend">Http://</template>
                </el-input>
            </div>
            <div style="margin-top: 15px;">
                <el-input placeholder="请输入内容" v-model="input2">
                    <template slot="append">.com</template>
                </el-input>
            </div>
            <div style="margin-top: 15px;">
                <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                    <el-select v-model="select" slot="prepend" placeholder="请选择">
                        <el-option label="餐厅名" value="1"></el-option>
                        <el-option label="订单号" value="2"></el-option>
                        <el-option label="用户电话" value="3"></el-option>
                    </el-select>
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>
        </el-form-item>

        <p>尺寸</p>
        <div class="demo-input-size">
            <el-input placeholder="请输入内容" siffix-icon="el-icon-date" v-model="input1"></el-input>
            <el-input size="medium" placeholder="请输入内容" suffix-icon="el-icon-data" v-model="input2"></el-input>
            <el-input size="small" placeholder="请输入内容" suffix-icon="el-icon-data" v-model="input3"></el-input>
            <el-input size="mini" placeholder="请输入内容" suffix-icon="el-icon-data" v-model="input4"></el-input>
        </div>

        <p>带输入建议</p>
        
            <el-row class="demo-autocomplete" >
                <el-col :span="12" align="center">
                    <div class="sub-title">激活即列出输入建议</div>
                    <el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
                </el-col>
                <el-col :span="12" align="center">
                    <div class="sub-title">输入后匹配输入建议</div>
                    <el-autocomplete class="inline-input" v-model="state2" :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false" @select="handleSelect"></el-autocomplete>
                </el-col>
            </el-row>
        

        <p>输入长度限制</p>
        <el-form-item>
            <el-input type="text" placeholder="请输入内容" v-model="text" maxlength="10" show-word-limit></el-input>
            <div style="margin: 20px 0;"></div>
            <el-input type="textarea" placeholder="请输入内容" v-model="textarea" maxlength="30" show-word-limit></el-input>
        </el-form-item>

        <p>自定义模板</p>
      
        <el-form-item>
            <el-autocomplete popper-class="my-autocomplete" v-model="state" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect">  
                <i class="el-icon-edit el-input__icon" slot="suffix" @click="handleIconClick"></i>
               <template slot-scope="{ item }">
                 <div class="name">{{ item.value }}</div>
                     <span class="addr">{{ item.address }}</span>
                </template>  
            </el-autocomplete>
        </el-form-item>
      
    </el-form>
</template>

<style>
.el-select .el-input{
     width:130px;
}
.input-with-slect .el-input-group__prepend{
   background-color:#dacaca;
}

.my-autocomplete
        li {
            line-height: normal;
            padding:7px;   
        }
 .my-autocomplete .name {
          text-overflow: ellipsis;
        overflow: hidden;
            }
 .my-autocomplete  .addr{
         font-size:12px;
        color:#2146c3;
            }
 .my-autocomplete  .highlighted .addr{
         color:#d3139a;
            }
        
</style>

<script>
    export default{
        data(){
            return{
                input:'',

                input1:'',
                input2:'',
                input3:'',
                input4:'',

                textarea:'',

                textarea1:'',
                textarea2:'',

                select:'',

                restaurants:[],
                state1:'',
                state2:'',

                text:'',

                state:''
            };
        },
        methods:{
            querySearch(queryString,cb){
                var restaurants =this.restaurants;
                var results =queryString ? restaurants.filter(this.createFilter(queryString)):restaurants;
                cb(results);
            },
            querySearchAsync(queryString,cb){
                var restaurants =this.restaurants;
                var results =queryString ? restaurants.filter(this.createFilter(queryString)):restaurants;
                
                clearTimeout(this.timeout);
                this.timeout=setTimeout(()=>{
                    cb(results);
                },3000*Math.random())
            },
            createFilter(queryString){
                return(restaurant)=>{
                    return(restaurant.value.toLowerCase().indexOf(queryString.toLowerCase())===0);
                };
            },
            loadAll(){
                return[
                    {"value":"天安门","address":"北京"},
                    {"value":"东关街","address":"扬州"},
                    {"value":"东方明珠","address":"上海"}
                ];
            },
            handleSelect(item){
                console.log(item);
            },
            handleIconClick(ev){
                console.log(ev);
            }
        },
        mounted(){
            this.restaurants=this.loadAll();
        }



    }

</script>
